﻿HmJS.$Import('base.fx.implicit');
//HmJS.$Import('core.domready');

HmJS.register('demo.module.base.fx.implicit', function ($ns) {
	var that = {};

	that.todo = function () {
		$$('.togglable').addEvent('click', function () {
			this.toggleClass('toggled');
		});
		//			$$('.demo').each(function (demo) {
		//				var script = demo.getElement('script').get('html');
		//				script = script.replace(/^\s+/, '');
		//				demo.getElement('pre>code').set('html', script);
		//			});

		// Clicking Boo, the inconspicuous 
		// rectangle on the right, toggles 
		// a class name and consequently
		// its background and color styles.
		// We'll only animate text color.

		Fx.Implicit.add('.boo', {
			properties: ['color']
		});

		// toggling Wobbler also changes
		// multiple styles, but Fx.Implicit 
		// can handle this automatically:

		Fx.Implicit.add('.wobbler', {
			transition: 'bounce:out'
		});

		// Specifying properties is 
		// recommended for efficiency though.

		// Changes in the DOM can trigger style 
		// changes for inner elements. In this 
		// example: critters move about when 
		// their cage gets seriously toggled.

		Fx.Implicit.add('.critter', {
			properties: ['left', 'top'],
			duration: 'long'
		});

		// Remember that Fx.Implicit inherits
		// all options from Fx
	};

	return that;
});
